<template>
  <!--资讯管理-->
  <div class="statistics-container">
    <vab-query-form>
      <vab-query-form-left-panel :span="4">
        <el-button type="primary" @click="addArticle">添加文章资讯</el-button>
        <el-button type="primary" @click="addVideo">添加视频资讯</el-button>
      </vab-query-form-left-panel>
      <vab-query-form-right-panel :span="20">
        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
          <el-form-item label="">
            <el-input
              v-model.trim="queryForm.keyword"
              style="width:180px;"
              placeholder="搜索标题"
              clearable
            />
          </el-form-item>
          <el-form-item label="">
            <el-select
              v-model="queryForm.classify"
              clearable
              placeholder="请选择资讯分类"
              @change="selectClass()"
              style="width:180px;"
            >
              <el-option
                v-for="item in classify"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-select
              v-model="queryForm.type"
              clearable
              placeholder="请选择资讯类型"
              @change="selectType()"
              style="width:180px;"
            >
              <el-option
                v-for="item in type"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search">
              查询
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-refresh-right"
              @click="restart"
            >
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-right-panel>
    </vab-query-form>

    <el-table
      v-loading="listLoading"
      :data="list"
      @selection-change="setSelectRows"
    >
      <el-table-column
        align="center"
        show-overflow-tooltip
        label="序号"
        sortable
        type="index"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="create_time"
        label="发布时间"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="title"
        label="文章名"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="order"
        label="排序值"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="label_name"
        label="文章类型"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="collect_count"
        label="收藏量"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="like_count"
        label="点赞量"
      />
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="detailList(scope)">编辑</el-button>
          <el-button type="text" @click="delList(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="wintit" :visible.sync="dialogFormVisible">
      <el-form :model="form" label-width="100px">
        <el-form-item label="标题:">
          <el-input v-model="form.title" placeholder="请输入标题" :rows="15" />
        </el-form-item>
        <el-form-item label="选择分类:">
          <el-radio-group v-model="form.radio" @change="sele">
            <el-radio label="1">地产资讯</el-radio>
            <el-radio label="2">行业资讯</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序值:">
          <el-input
            v-model="form.order"
            placeholder="请输入排序值,越大越在前面"
            :rows="15"
          />
        </el-form-item>
        <el-form-item label="初始收藏量:">
          <el-input
            v-model="form.collect"
            placeholder="请输入初始收藏量"
            :rows="15"
          />
        </el-form-item>
        <el-form-item label="初始点赞量:">
          <el-input
            v-model="form.thumb"
            placeholder="请输入初始点赞量"
            :rows="15"
          />
        </el-form-item>
        <el-form-item v-show="vs" label="上传视频:">
          <el-upload
            class="upload-demo"
            action=""
            list-type="picture-card"
            :show-file-list="false"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :http-request="uploadVideo"
          >
            <img v-if="video" width="150px" :src="video" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="上传封面:">
          <el-upload
            class="uploads"
            action=""
            list-type="picture-card"
            :show-file-list="false"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :http-request="uploadImg"
          >
            <img v-if="img" width="150px" :src="img" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item v-show="show" label="填写内容:">
          <quill-editor
            ref="text"
            v-model="form.content"
            class="myQuillEditor"
            :options="editorOption"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button v-show="shows" type="primary" @click="addA()">
          确 定
        </el-button>
        <el-button v-show="vss" type="primary" @click="addV()">确 定</el-button>
        <el-button v-show="edit" type="primary" @click="save()">
          确 定
        </el-button>
      </div>
    </el-dialog>

    <el-pagination
      background
      :current-page="queryForm.page"
      :page-size="queryForm.list_row"
      :layout="layout"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
  import {
    getInformationLists,
    getLabelLists,
    getOssUploadsParam,
    addInformationDatas,
    getInformationDatas,
    editInformationDatas,
    delInformations,
  } from '@/api/common'
  import axios from 'axios'
  import { quillEditor } from 'vue-quill-editor'
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'

  export default {
    name: 'Information',
    components: { quillEditor },
    data() {
      return {
        classify: [
          {
            value: 24,
            label: '地产资讯',
          },
          {
            value: 23,
            label: '行业资讯',
          },
        ],
        type: [
          {
            value: 1,
            label: '文章',
          },
          {
            value: 2,
            label: '视频',
          },
        ],
        queryForm: {
          page: 1,
          list_row: 10,
          keyword: '',
          classify: '',
          type: '',
        },
        form: {
          title: '',
          radio: '',
          order: '',
          collect: '',
          thumb: '',
          content: '',
        },
        rad: '1',
        editorOption: '',
        disabled: false,
        listLoading: false,
        list: [],
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        dialogFormVisible: false,
        labels: [],
        types: '',
        infomationid: '',
        wintit: '',
        img: '',
        video: '',
        show: false,
        vs: false,
        shows: false,
        vss: false,
        edit: false,
      }
    },
    created() {
      this.getData()
    },
    methods: {
      handleRemove() {},
      handlePictureCardPreview() {},
      handleDetail() {},
      //搜索
      search() {
        this.getData()
      },
      restart() {
        this.queryForm = []
        this.getData()
      },
      getData() {
        let params = {
          page: this.queryForm.page,
          limit: this.queryForm.list_row,
          input: this.queryForm.keyword,
          class: this.queryForm.classify,
          type: this.queryForm.type,
        }
        getInformationLists(params).then((data) => {
          this.list = data.data
          this.total = data.count
        })
        let pa = {
          type: 1,
          label_base_id: 0,
        }
        getLabelLists(pa).then((data) => {
          this.labels = data.data
        })
      },
      sele(e) {
        console.log(11111, e)
      },
      addA() {
        this.shows = true
        this.vss = false
        let params = {
          title: this.form.title,
          url: this.img,
          content: this.$refs.text.value,
          order: this.form.order,
          type: 1,
          label_id: this.labels[0].id,
          dummy_collect: this.form.collect,
          dummy_like: this.form.thumb,
          video_url: this.img,
        }
        addInformationDatas(params).then((data) => {
          this.$message.success('添加文章资讯成功！')
          this.dialogFormVisible = false
          this.getData()
        })
      },
      detailList(row) {
        this.dialogFormVisible = true
        this.wintit = '编辑资讯'
        this.edit = true
        this.shows = false
        this.vss = false
        this.infomationid = row.row.id
        this.types = row.row.type
        this.img = this.list[row.$index].url
        let params = {
          id: row.row.id,
        }
        getInformationDatas(params).then((data) => {
          this.form.title = data.data.title
          this.form.radio = data.data.type
          this.form.order = data.data.order
          this.form.collect = data.data.dummy_collect
          this.form.thumb = data.data.dummy_like
          this.img = data.data.url
          this.form.content = data.data.content
          this.video = data.data.video_url
        })
      },
      save(row) {
        let params = {
          id: this.infomationid,
          title: this.form.title,
          url: this.img,
          content: this.$refs.text.value,
          order: this.form.order,
          type: this.types,
          label_id: this.labels[1].id,
          dummy_collect: this.form.collect,
          dummy_like: this.form.thumb,
          video_url: this.video,
        }
        editInformationDatas(params).then((data) => {
          this.dialogFormVisible = false
          this.$message.success('修改资讯成功！')
          this.getData()
        })
      },
      addV() {
        this.shows = false
        this.vss = true
        let params = {
          title: this.form.title,
          url: this.img,
          content: this.$refs.text.value,
          order: this.form.order,
          type: 2,
          label_id: this.labels[1].id,
          dummy_collect: this.form.collect,
          dummy_like: this.form.thumb,
          video_url: this.video,
        }
        addInformationDatas(params).then((data) => {
          this.$message.success('添加视频资讯成功！')
          this.dialogFormVisible = false
          this.getData()
        })
      },
      setSelectRows() {},
      handleSizeChange(val) {
        this.queryForm.list_row = val
        this.getData()
      },
      handleCurrentChange(val) {
        this.queryForm.page = val
        this.getData()
      },
      selectType(e) {
        this.queryForm.types === e.value
      },
      delList(row) {
        let params = {
          id: row.id,
        }
        delInformations(params).then((data) => {
          this.$message.success('删除成功！')
          this.getData()
        })
      },
      uploadImg(params) {
        console.log(123, params)
        const file = params.file,
          fileType = file.type,
          isImage = fileType.indexOf('image') != -1,
          isLt2M = file.size / 1024 / 1024 < 2
        // 这里常规检验，看项目需求而定
        if (!isImage) {
          this.$message.error('只能上传图片格式png、jpg、gif!')
          return
        }
        if (!isLt2M) {
          this.$message.error('只能上传图片大小小于2M')
          return
        }
        getOssUploadsParam().then((res) => {
          const form = new FormData()
          form.append('key', res.data.dir + file.name)
          form.append('OSSAccessKeyId', res.data.accessid)
          form.append('policy', res.data.policy)
          form.append('success_action_status', '200')
          form.append('signature', res.data.signature)
          form.append('file', file)
          console.log(222, res)
          axios({
            url: res.data.host,
            method: 'POST',
            data: form,
            processData: false,
            cache: false,
            contentType: false,
          }).then((data) => {
            this.img = res.data.host + '/' + res.data.dir + file.name
            console.log(66, this.img)
          })
        })
      },
      uploadVideo(params) {
        console.log(123, params)
        const file = params.file,
          fileType = file.type,
          isImage = fileType.indexOf('image') != -1,
          isLt2M = file.size / 1024 / 1024 < 2
        getOssUploadsParam().then((res) => {
          const form = new FormData()
          form.append('key', res.data.dir + file.name)
          form.append('OSSAccessKeyId', res.data.accessid)
          form.append('policy', res.data.policy)
          form.append('success_action_status', '200')
          form.append('signature', res.data.signature)
          form.append('file', file)
          console.log(222, res)
          axios({
            url: res.data.host,
            method: 'POST',
            data: form,
            processData: false,
            cache: false,
            contentType: false,
          }).then((data) => {
            this.video = res.data.host + '/' + res.data.dir + file.name
            console.log(66, this.video)
          })
        })
      },
      addArticle() {
        this.dialogFormVisible = true
        this.show = true
        this.shows = true
        this.vs = false
        this.vss = false
        this.form = []
        this.img = ''
        this.wintit = '添加文章资讯'
      },
      addVideo() {
        this.dialogFormVisible = true
        this.show = false
        this.vs = true
        this.shows = false
        this.vss = true
        this.form = []
        this.img = ''
        this.video = ''
        this.wintit = '添加视频资讯'
      },
    },
  }
</script>

<style lang="scss" scoped>
  .el-button {
    font-size: 14px;
  }
</style>
